<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
        <el-form-item label="选择景区" prop="areaId">
          <el-select v-model="areaName" placeholder="请选择" style="width: 240px" @change="handleChangeArea">
            <el-option
              v-for="area in areaList"
              :key="area.areaId"
              :label="area.areaName"
              :value="area.areaId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="景点名称" prop="spotName">
          <el-input
            v-model="queryParams.spotName"
            placeholder="请输入景点名称"
            clearable
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        </el-form-item>
      </el-form>
  
      <el-table v-loading="loading" :data="spotList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="景点编号" prop="spotId" width="120" />
        <el-table-column label="景点名称" prop="spotName" :show-overflow-tooltip="true" width="150" />
        
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-view"
              @click="handleQueryById(scope.row)"
            >查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

      <!-- 查看景点对话框 -->
    <el-dialog title="景点详情" :visible.sync="openView" width="700px" append-to-body>
      <el-form ref="form" :model="form" label-width="120px" size="mini">
        <el-row>
          <el-col :span="12">
            <el-form-item label="景点编号：">{{ form.spotId }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="景点名称：">{{ form.spotName }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="景点描述：">{{ form.description }}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="openView = false">关 闭</el-button>
      </div>
    </el-dialog>
  
    </div>
  </template>
  
  <script>
  import { listSpot, getSpotById } from "@/api/tourss/scenicspot/spot";
  import { listScenicarea } from "@/api/tourss/scenicarea/area"
  
  export default {
    name: "Spot",
    dicts: ['sys_normal_disable'],
    data() {
      return {
        loading: true,
        areaList: [],
        areaId: null,
        areaName: null,
        spotList: [],
        total: 0,
        //是否显示搜索框
        showSearch: true,
        //是否显示景区详情层
        openView: false,
        //景点详情参数
        form: {},
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          areaId: undefined,
          spotName: undefined
        }
      };
    },
    created() {
      this.getAreaList()
    },
    methods: {
      getAreaList(){
        this.loading = true;
        listScenicarea(this.queryParams).then(response => {
            this.areaList = response.rows;
            this.total = response.total;
            this.loading = false;
          }
        );
      },
      handleChangeArea(areaId){
        this.areaId = areaId;
        this.getList(areaId);
      },
      /** 查询景点列表 */
      getList(areaId) {
        this.loading = true;
        this.queryParams.areaId = areaId;
        listSpot(this.queryParams).then(response => {
            this.spotList = response.rows;
            this.total = response.total;
            this.loading = false;
          }
        );
      },
      
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList(this.areaId);
      },
      handleQueryById(row){
        getSpotById(row.spotId).then(response => {
          this.form = response.data;
          this.openView = true;
        });
      }
    }
  };
  </script>